<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,height=device-height">
  <title>股票图</title>
  <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<!--<script>-->
  <!--$('<div id="slider"></div>').insertAfter('#mountNode');-->
  <!--$.getJSON('/assets/data/candle-sticks.json', function(data) {-->
    <!--// 设置状态量，时间格式建议转换为时间戳，转换为时间戳时请注意区间-->
    <!--var ds = new DataSet({-->
      <!--state: {-->
        <!--start: '2015-04-07',-->
        <!--end: '2015-07-28'-->
      <!--}-->
    <!--});-->
    <!--var dv = ds.createView();-->
    <!--dv.source(data).transform({-->
      <!--type: 'filter',-->
      <!--callback: function callback(obj) {-->
        <!--var date = obj.time;-->
        <!--return date <= ds.state.end && date >= ds.state.start;-->
      <!--}-->
    <!--}).transform({-->
      <!--type: 'map',-->
      <!--callback: function callback(obj) {-->
        <!--obj.trend = obj.start <= obj.end ? '上涨' : '下跌';-->
        <!--obj.range = [obj.start, obj.end, obj.max, obj.min];-->
        <!--return obj;-->
      <!--}-->
    <!--});-->
    <!--var chart = new G2.Chart({-->
      <!--container: 'mountNode',-->
      <!--forceFit: true,-->
      <!--height: window.innerHeight - 60,-->
      <!--animate: false,-->
      <!--padding: [10, 40, 40, 40]-->
    <!--});-->
    <!--chart.source(dv, {-->
      <!--'time': {-->
        <!--type: 'timeCat',-->
        <!--nice: false,-->
        <!--range: [0, 1]-->
      <!--},-->
      <!--trend: {-->
        <!--values: ['上涨', '下跌']-->
      <!--},-->
      <!--'volumn': {-->
        <!--alias: '成交量'-->
      <!--},-->
      <!--'start': {-->
        <!--alias: '开盘价'-->
      <!--},-->
      <!--'end': {-->
        <!--alias: '收盘价'-->
      <!--},-->
      <!--'max': {-->
        <!--alias: '最高价'-->
      <!--},-->
      <!--'min': {-->
        <!--alias: '最低价'-->
      <!--},-->
      <!--'range': {-->
        <!--alias: '股票价格'-->
      <!--}-->
    <!--});-->
    <!--chart.legend({-->
      <!--offset: 20-->
    <!--});-->
    <!--chart.tooltip({-->
      <!--showTitle: false,-->
      <!--itemTpl: '<li data-index={index}>' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + '{name}{value}</li>'-->
    <!--});-->

    <!--var kView = chart.view({-->
      <!--end: {-->
        <!--x: 1,-->
        <!--y: 0.5-->
      <!--}-->
    <!--});-->
    <!--kView.source(dv);-->
    <!--kView.schema().position('time*range').color('trend', function(val) {-->
      <!--if (val === '上涨') {-->
        <!--return '#f04864';-->
      <!--}-->

      <!--if (val === '下跌') {-->
        <!--return '#2fc25b';-->
      <!--}-->
    <!--}).shape('candle').tooltip('time*start*end*max*min', function(time, start, end, max, min) {-->
      <!--return {-->
        <!--name: time,-->
        <!--value: '<br><span style="padding-left: 16px">开盘价：' + start + '</span><br/>' + '<span style="padding-left: 16px">收盘价：' + end + '</span><br/>' + '<span style="padding-left: 16px">最高价：' + max + '</span><br/>' + '<span style="padding-left: 16px">最低价：' + min + '</span>'-->
      <!--};-->
    <!--});-->

    <!--var barView = chart.view({-->
      <!--start: {-->
        <!--x: 0,-->
        <!--y: 0.65-->
      <!--}-->
    <!--});-->
    <!--barView.source(dv, {-->
      <!--volumn: {-->
        <!--tickCount: 2-->
      <!--}-->
    <!--});-->
    <!--barView.axis('time', {-->
      <!--tickLine: null,-->
      <!--label: null-->
    <!--});-->
    <!--barView.axis('volumn', {-->
      <!--label: {-->
        <!--formatter: function formatter(val) {-->
          <!--return parseInt(val / 1000, 10) + 'k';-->
        <!--}-->
      <!--}-->
    <!--});-->
    <!--barView.interval().position('time*volumn').color('trend', function(val) {-->
      <!--if (val === '上涨') {-->
        <!--return '#f04864';-->
      <!--}-->

      <!--if (val === '下跌') {-->
        <!--return '#2fc25b';-->
      <!--}-->
    <!--}).tooltip('time*volumn', function(time, volumn) {-->
      <!--return {-->
        <!--name: time,-->
        <!--value: '<br/><span style="padding-left: 16px">成交量：' + volumn + '</span><br/>'-->
      <!--};-->
    <!--});-->

    <!--chart.render();-->

    <!--chart.interact('slider', {-->
      <!--container: 'slider', // DOM id-->
      <!--start: ds.state.start, // 和状态量对应-->
      <!--end: ds.state.end,-->
      <!--data: data, // 源数据-->
      <!--xAxis: 'time', // 背景图的横轴对应字段，同时为数据筛选的字段-->
      <!--yAxis: 'volumn', // 背景图的纵轴对应字段，同时为数据筛选的字段-->
      <!--scales: {-->
        <!--time: {-->
          <!--type: 'timeCat',-->
          <!--nice: false-->
        <!--}-->
      <!--},-->
      <!--onChange: function onChange(_ref) {-->
        <!--var startText = _ref.startText,-->
          <!--endText = _ref.endText;-->

        <!--ds.setState('start', startText);-->
        <!--ds.setState('end', endText);-->
        <!--setTimeout(function() {-->
          <!--chart.render();-->
        <!--}, 32);-->
      <!--}-->
    <!--});-->
  <!--});-->
<!--</script>-->
<script>
  var arr = []
  function change (t) {
    if (t < 10) {
      return '0' + t
    } else {
      return t
    }
  }
  function timestampToTime (timestamp) {
    let date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
    let h = change(date.getHours()) + ':'
    let m = change(date.getMinutes())
    return h + m
  }
  function getTableArr (t) {
    var time = 1548172800000
    for (var i = 0; i < 1440 / t; i ++ ) {
      var obj = {
        time: timestampToTime(time) + '~' + timestampToTime(time += t * 60000),
        bidsHigh: '0',
        bidsLow: '0',
        asksHigh: '0',
        asksLow: '0',
        amountHight: '0',
        amountLow: '0',
        depth: '0',
        frequency: '0'
      }
      arr.push(obj)
    }
  }
  getTableArr(5)
</script>
</body>
</html>
